<script setup lang="ts">

import PlayListSongs from '@/components/playlist/PlayListSongs.vue'
import { onMounted, type PropType, ref } from 'vue'


const props = defineProps({
  active: {
    type: String,
    default: "songs"
  },
  word: {
    type: String,
    default: ""
  },
  songs:{
    type: Object as PropType<song_info[]>,
    default: () => {return []}
  },
  artists:{
    type: Object as PropType<artist_info[]>,
    default: () => {return []}
  },
  albums:{
    type: Object as PropType<album_info[]>,
    default: () => {return []}
  },


})

const activeName = ref('songs')


onMounted(()=>{
  activeName.value = props.active

})


</script>

<template>
  <el-tabs v-model="activeName" class="playlist-tabs" >
    <el-tab-pane label="单曲" name="songs" >
      <div class="list" ref="tabRef">
        <PlayListSongs :songs="songs"></PlayListSongs>
      </div>
    </el-tab-pane>
    <el-tab-pane label="歌手" name="artist">

    </el-tab-pane>
    <el-tab-pane label="专辑" name="album">

    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">

</style>